<script setup lang="ts">
import {
    NButton,
    NSpace,
    NDataTable,
    NInput,
    type DataTableColumns,
    NPagination,
    NForm,
    NFormItem,
    NModal,
    NSelect,
    useMessage,
    NDatePicker,
    NGrid,
    NEllipsis,
    NGi
} from 'naive-ui'
import { h, onMounted, reactive, ref } from 'vue'
import ApproveProcess from '@/components/Approve/approveProcess.vue'
import ApproveRecord from '@/components/Approve/approveRecord.vue'
import ApproveFlow from '@/components/Approve/approveFlow.vue'
import { sendRequest } from '@/utils/api'
import { useTagStore } from '@/stores/layout'
import type { HttpResponsePagination, HttpResponse } from '@/utils/http'
import type { InterpreterModel } from '@/api/interpreter'
import VDisOrEnd from '@/views/OA/Common/DisOrEnd.vue'
import { useRouter, useRoute } from 'vue-router'
import FixedAction from '@/components/FixedAction.vue'
import VBackImg from '@/assets/images/back.png'
import { RecordType } from '@/router/utils'
import dayjs from 'dayjs'
const tags = useTagStore().tags
const message = useMessage()
const router = useRouter()
const route = useRoute()

const detail = ref<any>({

})
const renderUseTime = () => {
    if (detail.value && detail.value.startUsageTime) {
        return `${detail.value.startUsageTime.split(" ")[0]}至${detail.value.endUsageTime.split(" ")[0]}`
    }
    return ''
}
// 返回
const goBack = () => {
    const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
    tags.splice(index, 1)
    if (tags.length == 0) {
        router.push({ path: '/OA/Workbench/UserDesktop' })
    } else history.back()
}
const columns: any[] = [
    {
        key: 'collectibleName', title: '藏品名称', align: 'center', render: (rowData: any, rowIndex: number) => {
            return rowIndex !== detail.value.digitalCollectiblesList.length - 1 ? rowData.collectibleName : '用途及使用时间'
        }
    },
    {
        key: 'assessNumber',
        title: '藏品条码号',
        align: 'left',
        colSpan: (rowData: any, rowIndex: number) => (rowIndex === detail.value.digitalCollectiblesList.length - 1 ? 3 : 1),
        render: (rowData: any, rowIndex: number) => (rowIndex === detail.value.digitalCollectiblesList.length - 1) ? [
            h(
                'div',
                {},
                {
                    default: () => detail.value.startUsageTime ? `${detail.value.startUsageTime.split(" ")[0]}至${detail.value.endUsageTime.split(" ")[0]}` : ''
                }
            ),
            h(
                'div',
                {},
                {
                    default: () => detail.value.purpose
                }
            ),
        ] : rowData.assessNumber
    },
    { key: 'dataRequirements', title: '数据要求', align: 'center' },
    { key: 'remark', title: '备注', align: 'center' }
]

const getDetail = async (id: string) => {
    const [error, res] = await sendRequest<HttpResponse>({
        module: 'digitalCollect',
        api: 'info',
        uri: {
            id
        }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    detail.value = res.data
}
onMounted(() => {
    if (route.query.id) {
        getDetail(String(route.query.id))
    }
})

</script>

<template>
    <div class="container">
        <div class="topTitle" v-if="!RecordType.DigitalCollectRouteName">数字资源申请详情页面</div>
        <div class="content">
            <VDisOrEnd v-if="RecordType.DigitalCollectRouteName" :id="detail.workflowInfoVo?.fromId"
                :assigneeFlag="detail.workflowInfoVo?.assigneeFlag" :title="'数字资源申请详情'"></VDisOrEnd>
            <div class="table_box" v-if="detail">
                <!-- <NDataTable :columns="columns" :data="detail.digitalCollectiblesList" :pagination="false" style="width: 60%;" /> -->
                <div class="firstBox">
                    <div class="title1">藏品名称</div>
                    <div class="title2">藏品条码号</div>
                    <!-- <div class="title3">数据要求</div> -->
                    <div class="title4">备注</div>
                </div>
                <div class="valueBox" v-for="(item, index) in detail.digitalCollectiblesList" :key="index">
                    <div class="title1">{{ item.collectibleName }}</div>
                    <div class="title2">{{ item.assessNumber }}</div>
                    <!-- <div class="title3">{{ item.dataRequirements }}</div> -->
                    <div class="title4">
                        <!-- <NEllipsis style="font-size: 18px;flex: 1;">
                            {{ item.remark }}
                            <template #tooltip>
                                <div style="font-size: 18px;max-width: 500px;">
                                    {{ item.remark }}
                                </div>
                            </template>
                        </NEllipsis> -->
                        <div style="font-size: 18px;max-width: 500px;">
                            {{ item.remark }}
                        </div>
                    </div>
                </div>
                <div class="second_box">
                    <div class="title1">用途及使用时间</div>
                    <div class="value1">
                        <div style="height: 40px;line-height: 40px;">{{ renderUseTime() }}</div>
                        <div style="height: auto;line-height: 30px;">{{ detail.purpose }}</div>
                    </div>
                </div>
            </div>
            <!-- <div class="line"></div> -->
            <!-- <div class="info_box" v-if="detail">
                <NGrid x-gap="12" y-gap="24" :cols="3">
                    <NGi>
                        <span>申请人部门</span>: {{ detail.deptName }}
                    </NGi>
                    <NGi>
                        申请人: {{ detail.userName }}
                    </NGi>
                    <NGi>
                        申请时间: {{ detail.createTime }}
                    </NGi>
                    <NGi v-if="detail.startUsageTime && detail.endUsageTime">
                        使用时间: {{ `${detail.startUsageTime.split(" ")[0]}至${detail.endUsageTime.split(" ")[0]}` }}
                    </NGi>
                    <NGi>
                        用途: {{ detail.purpose }}
                    </NGi>
                </NGrid>
            </div> -->
            <div class="basin_info">
                <div style="display: flex; align-items: center">
                    <div class="basin_five_left">
                        <div class="box">
                            <span>申请人部门：</span>
                            <span>
                                {{ detail.deptName }}
                            </span>
                        </div>
                    </div>
                    <div class="basin_five_left">
                        <div class="box">
                            <span>申请人：</span>
                            <span>{{ detail.userName }}</span>
                        </div>
                    </div>
                    <div class="basin_five_left">
                        <div class="box">
                            <span>数据精度要求：</span>
                            <span>{{ detail.dataRequirements }}</span>
                        </div>
                    </div>
                    
                </div>
                <div style="display: flex; align-items: center">
                    <div class="basin_five_left">
                        <div class="box">
                            <span>用途：</span>
                            <span>{{ detail.purpose }}</span>
                        </div>
                    </div>
                    <div class="basin_five_left">
                        <div class="box">
                            <span>申请时间：</span>
                            <span>
                                {{ detail.createTime }}
                            </span>
                        </div>
                    </div>
                    <div class="basin_five_left">
                        <div class="box">
                            <span>使用时间：</span>
                            <span>{{ renderUseTime() }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="title" v-if="detail.workflowInfoVo">审批信息</div>
            <div class="flow_box" v-if="detail.workflowInfoVo">
                <div class="approve">
                    <div class="box">
                        <span>审批状态</span>
                        <span style="font-size: 20px;">{{ detail.workflowInfoVo?.status }}</span>
                    </div>
                    <div class="box">
                        <span>审批流程</span>
                        <div style="color: #5fb17f;font-size: 20px;font-weight: 500;">
                            <div style="display: inline;" v-for="(item, index) in detail.workflowInfoVo?.workflowList"
                                :key="index">
                                <span :style="{ textDecoration: item.value ? 'underline' : 'none' }">
                                    {{ item.key }}</span>
                                <span v-if="index != detail.workflowInfoVo?.workflowList.length - 1">→</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="title">审批记录</div>
            <div class="record_box">
                <ApproveRecord :data="detail.workflowInfoVo ? (detail.workflowInfoVo.approvalRecordsList || []) : []" />
            </div>
        </div>
    </div>
    <FixedAction>
        <NSpace justify="start">
            <NSpace justify="start">
                <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
                    <template #icon>
                        <img :src="VBackImg" style="width: 25rem; height: 25rem" />
                    </template>
                    返回
                </NButton>
            </NSpace>
        </NSpace>
    </FixedAction>
</template>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ebeceb;

    .topTitle {
        border-bottom: 1px solid #fff;
        color: #000000d9;
        font-family: PingFangSC, PingFang SC;
        font-size: 16rem;
        font-weight: 400;
        margin-bottom: 20rem;
        padding: 15rem 20rem;
        width: 100%;
    }

    .title {
        font-size: 22px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #5fb17f;
        margin-bottom: 10rem;
    }

    @mixin flexCom {
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: break-all;
        text-align: center
    }

    .content {
        width: 100%;
        height: calc(100% - 240rem);
        box-sizing: content-box;
        padding: 18rem 33rem 120rem;
        overflow-y: scroll;

        .table_box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 15%;
            border-bottom: 1px dashed #bc9e70;
            padding-bottom: 20px;
            margin-bottom: 20px;

            .firstBox {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                height: 50px;
                line-height: 50px;
                border-top: 1px solid black;
                border-left: 1px solid black;
                border-bottom: 1px solid black;
                font-size: 22px;
                letter-spacing: 5px;
                font-weight: bolder !important;
                background-color: #FFFFFF;


                .title1 {
                    flex: 0 0 25%;
                    border-right: 1px solid black;
                    // text-align: center;
                    @include flexCom;
                }

                .title2 {
                    flex: 0 0 25%;
                    border-right: 1px solid black;
                    @include flexCom;

                }

                .title3 {
                    flex: 0 0 25%;
                    border-right: 1px solid black;
                    @include flexCom;

                }

                .title4 {
                    flex: 1;
                    border-right: 1px solid black;
                    @include flexCom;

                }
            }

            .valueBox {
                width: 100%;
                display: flex;
                min-height: 50px;
                border-top: 1px solid black;
                border-left: 1px solid black;
                border-bottom: 1px solid black;
                font-size: 18px;
                letter-spacing: 5px;
                background-color: #FFFFFF;


                .title1 {
                    flex: 0 0 25%;
                    border-right: 1px solid black;
                    @include flexCom;

                }

                .title2 {
                    width: 100%;
                    flex: 0 0 25%;
                    border-right: 1px solid black;
                    @include flexCom;

                }

                .title3 {
                    flex: 0 0 25%;
                    border-right: 1px solid black;
                    @include flexCom;

                }

                .title4 {
                    width: auto;
                    // height: 100%;
                    // flex: 0 0 25%;
                    border-right: 1px solid black;
                    flex: 1;
                    @include flexCom;
                    overflow: hidden;
                }
            }

            .second_box {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: strentch;
                // height: 80px;
                border-top: 1px solid black;
                border-left: 1px solid black;
                border-bottom: 1px solid black;
                font-size: 20px;
                letter-spacing: 5px;
                background-color: #FFFFFF;

                .title1 {
                    flex: 0 0 25%;
                    // height: 80px;
                    //line-height: 80px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-right: 1px solid black;
                    text-align: center;
                }

                .value1 {
                    flex: 0 0 75%;
                    // height: 80px;
                    // line-height: 80px;
                    border-right: 1px solid black;
                    text-align: left;
                    padding: 0 3%;
                    font-size: 18px;
                }
            }
        }

        .line {
            width: 80%;
            margin-left: 10% !important;
            height: 1px;
            background-color: #cbcbcb;
            margin: 40px 0;
        }

        .info_box {
            padding: 0 10%;
            box-sizing: content-box;
            display: flex;
            justify-content: center;
            align-items: center;

            .title {
                color: #333;
                display: inline-block;
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-weight: 700;
                width: 120px;
            }
        }

        .basin_info {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: auto;
            border-bottom: 1px dashed #bc9e70;
            margin-bottom: 20px;

            .basin_five_left {
                flex: 0 0 33%;
            }

            .box1 {
                display: flex;
                justify-content: flex-start;
                width: 200px;
                margin-bottom: 20px;

                span {
                    width: 100px;
                }
            }

            .box {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                font-size: 16px;

                span:first-child {
                    display: inline-block;
                    width: 120px;
                    font-weight: bold;
                    color: #333333;
                    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                }

                span:last-child {
                    display: inline-block;
                    flex: 1;
                    color: #55524f;
                    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

                }
            }

            .basin-left {
                .box1 {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    font-size: 16px;

                    span:first-child {
                        display: inline-block;
                        width: 120px;
                        font-weight: bold;
                        color: #333333;
                        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                    }

                    span:last-child {
                        display: inline-block;
                        flex: 1;
                        color: #55524f;
                        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

                    }
                }
            }

        }

        .approve {
            display: flex;
            width: 100%;
            margin-bottom: 20px;
            border-bottom: 1px dashed #bc9e70;

            .box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                min-width: 50px;
                width: auto;
                height: 90px;
                border-radius: 4px;
                border: 1px solid #d9d9d9;
                padding: 12px;
                margin-right: 10px;
                margin-bottom: 20px;

                span:first-child {
                    font-size: 16px;
                }

                span:last-child {
                    font-weight: 500;
                    color: #5fb17f;
                }
            }
        }

        .record_box {
            width: 80%;
            background-color: #e1e1e1;
            margin-top: 20px;
        }

        .flow_box {
            margin-top: 20px;
        }

    }
}
</style>
